<template>
    <div class="forexcrt">
        <hd :forexList="forexList"></hd>   
        <div class="forexcrt-name" v-for="(forex, index) in forexList">
            <row :index="index" :forexList="forexList" :forexsData="forexsData"></row>   
        </div>
    </div>
</template>

<script>
import row from './Row';
import hd from './Header';
export default {
    name: 'Forexcrt',
    data() {
        return {
            forexList: [],
            forexsData: {}
        }
    },
    created() {
        this.forexList = ['USD','CAD','JPY','CHN','HKD','GBP','EUR'];
        this.createForexsData();
    },
    methods: {
        createForexsData() {
            var forexList = this.forexList;
            for(var i=0; i<forexList.length; i++){
                var _forexRow = forexList[i];
                for(var j=0; j<forexList.length; j++){
                    var _forexList = forexList[j];
                    if( _forexRow === _forexList) {
                        this.forexsData[_forexRow+_forexList] = '-';
                    } else {
                        this.forexsData[_forexRow+_forexList] = this.createRandomNumber();
                    }
                }
            }
        },
        createRandomNumber() {
            return Math.ceil(Math.random()*5);
        }
    },
    components: {
        hd,
        row
    }
}
</script>